<template>
	<view class="uploadBox">
		<u-upload ref="upload" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :name="name" multiple
			:maxCount="maxCount" :width="width" :height="height" :sizeType="['compressed']">
			<slot name="image">
				<view class="imageBox" :style="{width:width,height:height}">
					<u-icon name="plus" color="#909399" size="26"></u-icon>
				</view>
			</slot>
		</u-upload>
		<view class="title" v-if="title">{{title}}</view>
	</view>
</template>

<script>
	import {
		HTTP_IMG_URL
	} from '@/config/app.js'
	import store from '@/store';
	export default {
		name: "upload-image",
		data() {
			return {};
		},
		props: {
			fileList: {
				type: Array,
				default () {
					return []
				} //上传组件的名称
			},
			name: {
				type: String,
				default: 'fileList' //上传组件的名称
			},
			maxCount: {
				type: Number,
				default: 10 //最大上传数量
			},
			width: {
				type: String,
				default: '160rpx' //上传组件的宽度
			},
			height: {
				type: String,
				default: '160rpx' //上传组件的高度
			},
			title: {
				type: String,
				default: null //文件上传提示词
			}
		},
		methods: {
			//重置图片
			resetPic(){
				this.fileList.splice(0, 1);
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.uploadSuccess(event)
			},
			compressImagePromise(src) {
				return new Promise((resolve, reject) => {
					uni.compressImage({
						src,
						quality: 80,
						success: (res) => resolve(res),
						fail: (err) => reject(err)
					});
				});
			},
			uploadFilePromise(tempFilePath) {
				return new Promise((resolve, reject) => {
					this.$uploadFilePromise(tempFilePath).then(result => {
						resolve(result);
					}).catch(err => {
						reject(err);
					});
				});
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file);
				const originalFileListLen = this.fileList.length;

				try {
					for (let i = 0; i < lists.length; i++) {
						// 添加占位文件
						this.fileList.push({
							...lists[i],
							status: 'uploading',
							message: '上传中'
						});

						// 处理当前文件索引
						const currentFileListIndex = originalFileListLen + i;

						// #ifdef H5
						const baseResult = await this.$imageCompres(lists[i].url);
						const result = await this.$uploadBase64Image(baseResult);
						// #endif

						// #ifdef APP
						const compressedRes = await this.compressImagePromise(lists[i].url);
						const result = await this.uploadFilePromise(compressedRes.tempFilePath);
						// #endif

						// 更新文件状态
						this.fileList.splice(currentFileListIndex, 1, {
							...this.fileList[currentFileListIndex],
							status: 'success',
							message: '',
							url: result.fullurl,
							img: result.url
						});
					}
					// 所有文件处理完成后执行
					this.uploadSuccess(event);
				} catch (error) {
					console.error('上传失败:', error);
					// 可在此处添加错误处理逻辑
				}
			},
			uploadSuccess(event) {
				let fullurl = this.fileList.map(item => {
					return item.url
				})
				let fileList = this.fileList.map(item => {
					return item.img
				})

				this.$emit('uploadSuccess', {
					name: event.name,
					fileList: fileList.join(','),
					fullurl: fullurl.join(',')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uploadBox {
		.title {
			font-size: 28rpx;
			text-align: center;
			margin-top: 14rpx;
		}
	}

	.imageBox {
		background-color: #F4F5F7;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
</style>